<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{num}}</div>
  </body>
  <script>
    // Vue.Mixin({
    //   created: function a() {
    //     console.log("a-mixin的created");
    //   },
    // });
    // Vue.Mixin({
    //   created: function b() {
    //     console.log("b-mixin的created");
    //   },
    // });
    let vm = new Vue({
      el: "#app",
      data: {
        num: "111",
      },
    });
    vm.num = 44
    // let vm1 = new Vue({
    //   el: "#app",
    //   data: {
    //     num: "666",
    //   },
    // });

    // let vm = new Vue({
    //   el: "#app",
    //   data: function () {
    //     return {
    //       obj: 123,
    //       num: 1,
    //       name: "zs",
    //       age: "18",
    //       arr: [1, 2, 3],
    //       num: {
    //         num: "6666",
    //       },
    //     };
    //   },
    //   updated() {
    //     console.log("updated");
    //   },
    //   mounted() {
    //     console.log("mounted");
    //   },
    //   created() {
    //     console.log("原-created");
    //   },
    //   watch: {
    //     "num.num": {
    //       handler() {
    //         console.log("监视属性执行了");
    //       },
    //       immediate: true,
    //     },
    //   },
    //   methods: {},
    //   computed: {},
    // });
    // setTimeout(() => {
    //   // console.log(vm);
    //   vm._data.obj = "网二123";
    //   vm._data.name = "王二把名字";
    //   vm._data.arr.push("数字");
    //   vm.$nextTick(() => {
    //     console.log(vm);
    //     console.log(vm.$el, "6666");
    //   });
    //   vm.num.num = 1000;
    //   // console.log(vm._data);
    //   // vm._update(vm._render())
    //   // console.log(vm);
    // }, 1000);

    //Vue初次渲染： --->先初始化数据  ---->将模板进行编译 --->变成render()=>生成虚拟节点=>变成真是dom

    // Vue 模板编译   template     render    el  注意：必须要有el，  如果三者都有，先执行render，在执行template，最后执行el

    //自动更新
    /*
      1.数据变化，自动更新视图，vm._update(vm.render())
      2.vue中更新组件策略是， 以组件为单位，给每一个组件添加一个watcher
    */

    /*
        数组收集
        思路：
        1.我们给所有对象类型添加一个dep
        2.获取数组的值，会调用get方法，我们希望当前数组记住这个渲染的watcher
         2.1 需要获取到当前dep
         2.2 当前面对数组取值的时候，我们就让数组的dep记住这个watcher
         3.1 我们更新数组的时候 push pop 等等，找到我们这个watcher 进行更新
    */
  </script>
</html>
